<template>
    <view class="component-order-item">
        <view class="order-head">
            <view class="order-title">
                <text class="type" :style="{ backgroundColor: typeTextBg }">
                    {{ typeText }}
                </text>
                <text class="text">{{ order.cate }}</text>
            </view>
            <view class="more">
                <text class="text">详情</text>
                <text class="iconfont icon-jinru"></text>
            </view>
        </view>
        <view class="order-body">
            <view class="order-desc-row datetime">
                <text class="text">{{ order.createTime }}</text>
            </view>
            <view class="order-desc-row">
                <text class="title">订单编号：</text>
                <text class="text">{{ order.orderId }}</text>
            </view>
            <block v-if="order.listType != 't3'">
                <view class="order-desc-row">
                    <text class="title">服务分类：</text>
                    <text class="text">{{ order.cate }}</text>
                </view>
                <view class="order-desc-row limit-line clamp-1">
                    <text class="title">需求内容：</text>
                    <text class="text">{{ order.content }}</text>
                </view>
            </block>
            <view class="order-desc-row">
                <text class="title">下单时间：</text>
                <text class="text">{{ order.createTime }}</text>
            </view>
            <view class="order-desc-row">
                <text class="title">服务时间：</text>
                <text class="text">{{ order.serviceTime }}</text>
            </view>
        </view>
        <view class="order-footer">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: "component-order-item",
    data() {
        return {
            typeText: "",
            typeTextBg: "",
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {
        let [typeText, typeTextBg] = this.$models.order.typeText(this.order.listType, this.order.orderType);
        this.typeText = typeText;
        this.typeTextBg = typeTextBg ? typeTextBg : "#8b9beb";
    },
    destroyed() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.component-order-item {
    .order-item {
        width: 100%;
        box-sizing: border-box;
        padding: 0 28rpx;
        background-color: #ffffff;
        margin-bottom: 26rpx;
    }
    .order-item:last-child {
        margin-bottom: 0;
    }
    .order-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40rpx;
    }
    .order-title {
        display: flex;
        align-items: center;
        .type {
            display: inline-block;
            box-sizing: border-box;
            padding: 9rpx 24rpx;
            border-radius: 10rpx;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 24rpx;
            margin-right: 22rpx;
        }
        .text {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            line-height: 30rpx;
        }
    }
    .more {
        font-size: 26rpx;
        font-weight: bold;
        color: #666666;
        line-height: 32rpx;
    }
    .order-body {
        width: 100%;
        border-bottom: 2rpx solid #e8e7e7;
        padding: 24rpx 0;
    }
    .order-desc-row {
        position: relative;
        width: 100%;
        font-size: 28rpx;
        line-height: 30rpx;
        margin-bottom: 22rpx;
        .title {
            color: #999999;
        }
        .text {
            color: #000000;
        }
    }
    .order-desc-row:last-child {
        margin-bottom: 0;
    }
    .order-desc-row.datetime {
        margin-bottom: 40rpx;
        .text {
            color: #999999;
        }
    }
    .order-footer {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx 0;
    }
}
</style>